<template>
	<view>
		<view class="tabr" :style="{top:headerTop}">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"
			 @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<view class="place"></view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" enable-flex="true" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<!-- <empty v-if="tabItem.loaded === true && tabItem.couponList.length === 0">没有数据</empty> -->
					<view class="tis" v-if="tabItem.loaded === true && tabItem.couponList.length==0">
						<image class="img" mode="widthFix" src="/static/empty/empty-coupon.png"></image>
						<text class="text">暂无优惠券</text>
					</view>
					<!-- 优惠券列表 -->
					<view v-for="(item, index) in tabItem.couponList" :key="index" class="row">
						<view class="left">
							<view class="title">
								￥
							</view>
							<view class="voucher">
								<view>{{item.ticket}}</view>
								<view class="text">抵扣券</view>
							</view>
						</view>
						<view class="content">
							<view class="title">
								{{item.title}}
							</view>
							<view class="text">
								{{item.note}}
							</view>
							<view class="term">
								{{item.startTime}}~{{item.endTime}}
							</view>
						</view>
						<view class="right">
							<view class="use" v-if="tabIndex === 0">
								{{item.use}}
							</view>
							<view class="used" v-if="tabIndex === 1">
								{{item.use}}
							</view>
							<image class="img" mode="widthFix" v-if="tabIndex === 2" src="../../static/yiguoqi.png"></image>
						</view>

					</view>
				</scroll-view>

			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [
					{
						status: 0,
						text: '未使用',
						loadingType: 'more',
						loaded: true,
						couponList: [
						// 	{
						// 	id: 1,
						// 	title: '全场通用，无门槛',
						// 	note: '(集市商品购买)',
						// 	startTime: '2020-02-01',
						// 	endTime: '2020-06-01',
						// 	ticket: '5',
						// 	criteria: '',
						// 	use: '去使用'
						// }
						]
					},
					{
						status: 1,
						text: '已使用',
						loadingType: 'more',
						loaded: true,
						couponList: [
						// 	{
						// 	id: 2,
						// 	title: '全场通用，无门槛',
						// 	note: '(集市商品购买)',
						// 	startTime: '2020-02-01',
						// 	endTime: '2020-06-01',
						// 	ticket: '5',
						// 	criteria: '',
						// 	use: '已使用'
						// }
						]
					},
					{
						status: 2,
						text: '已过期',
						loadingType: 'more',
						loaded: true,
						couponList: [
						// 	{
						// 	id: 3,
						// 	title: '全场通用，无门槛',
						// 	note: '(集市商品购买)',
						// 	startTime: '2020-01-01',
						// 	endTime: '2020-02-05',
						// 	ticket: '5',
						// 	criteria: '',
						// 	use: '已过期'
						// }
						]
					}
				],
				headerTop: 20,
				//控制滑动效果
				typeClass: 'valid',
				subState: '',
				theIndex: null,
				oldIndex: null,
				isStop: false
			}
		},
		onPageScroll(e) {

		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(options) {
			this.loadData();
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		methods: {
			//控制左滑删除效果-begin
			touchStart(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
			},
			touchMove(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];

				if (this.isStop || Math.abs(moveX) < 5) {
					return;
				}
				if (Math.abs(moveY) > Math.abs(moveX)) {
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}

				if (moveX < 0) {
					this.theIndex = index;
					this.isStop = true;
				} else if (moveX > 0) {
					if (this.theIndex != null && this.oldIndex == this.theIndex) {
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(() => {
							this.oldIndex = null;
						}, 150)
					}
				}
			},

			touchEnd(index, $event) {
				//解除禁止触发状态
				this.isStop = false;
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				// this.loadData('refresh');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				// this.loadData('refresh');
			},
			async loadData(type = 'add', loading) {
				// let index = this.tabCurrentIndex;
				// let navItem = this.navList[index];
				// let status = navItem.status;
			}

		}
	}
</script>
<style lang="scss">
	view {
		display: flex;
		flex-wrap: wrap;

	}

	page {
		// position: relative;
		background-color: #f5f5f5;
	}

	.hidden {
		display: none !important;
	}

	.place {
		width: 100%;
		height: 95upx;
	}

	.tabr {
		background-color: #fff;
		width: 100%;
		height: 95upx;
		padding: 0 3%;
		border-top: solid 1upx #dedede;
		border-bottom: solid 1upx #EFF2F4;
		position: fixed;
		top: 50;
		z-index: 10;

		.nav-item {
			width: 33.3%;
			height: 90upx;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
			color: #757677;
			position: relative;

			&.current {
				color: #232323;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #FFBC21;
				}
			}
		}
	}

	.list-scroll-content {
		height: 100%;
		min-height: calc(100vh - 95upx);
	}
	
	.swiper-box {
		width: 100%;
		height: calc(100vh - 95upx);
	}

	.uni-swiper-item {
		height: 100%;
	}

	.row {
		width: 92%;
		min-height: 182upx;
		margin: 20upx 4%;
		padding: 0 15upx 0 10upx;
		border-radius: 8upx;
		display: flex;
		border: 1upx solid #E1E4E5;
		background-color: #FFFFFF;
		justify-content: space-between;

		.left {
			width: 25%;
			margin-right: 10upx;
			// height: 100%;
			display: flex;
			align-items: center;
			color: #E52631;

			.title {
				width: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}

			.voucher {
				width: 75upx;
				display: flex;
				flex-wrap: wrap;
				font-size: 78upx;
				align-items: center;

				view {
					display: flex;
					justify-content: center;
				}

				.text {
					// margin-bottom: -20upx;
					// margin-bottom: -15upx;
					font-size: 22upx;
				}
			}
		}

		.content {
			width: 44%;
			display: flex;

			// justify-content:flex-start;
			.title {
				margin-top: 30upx;
				font-size: 28upx;
				color: #232323;
			}

			.text {
				font-size: 24upx;
				color: #ABACAD;
			}

			.term {
				font-size: 22upx;
				color: #ABACAD;
			}
		}

		.right {
			width: 27%;
			// margin-right: 5upx;
			display: flex;
			align-items: center;

			.use,
			.used {
				align-items: center;
				justify-content: center;
				border-radius: 34upx;
				width: 180upx;
				height: 68upx;
				background-color: #FFBC21;
				font-size: 28upx;
				color: #FFFFFF;
			}

			.used {
				background-color: #E1E4E5;
				color: #757677;
			}

			.img {
				width: 155upx;
				height: 155upx;
				display: flex;
				margin-left: 25upx;
			}
		}
	}

	.tis {
		width: 100%;
		height: 100%;
		padding-top: 187upx;
		display: flex;
		flex-flow: column wrap; 
		justify-content: flex-start;
		align-items: center;
		font-size: 32upx;
		box-sizing: border-box;
		

		.img {
			// width: 180upx;
			// height: 200upx;
			width: 266.6upx;
			height: 307upx;
		}

		.text {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 20upx;
			font-size: 24upx;
			color: #ABADAD;
		}
	}
</style>
